<template>
	<view>
		<div class="cateListContainer" v-show="activeCate">
			<swiper :indicator-dots="true"
			 :autoplay="true" 
			 indicator-color="white" 
			 indicator-active-color="pink">
				<swiper-item v-for="(item,index) in activeCate.category.bannerUrlList" :key="index">
					<image :src="item"></image>
					</swiper-item>
			</swiper>
			<text class="title">{{activeCate.category.name}}</text>
			<text class="desc">{{activeCate.category.frontName}}</text>
			<ShopList :shopList="activeCate.itemList"></ShopList>
		</div>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import ShopList from '../shopList/shopList.vue'
	export default {
		props: ['navId'],
		components:{
			ShopList
		},
		data() {
			return {};
		},
		computed:{
			...mapState('indexModule',['cateList']),
			//不同tab栏对应不同的对象
			activeCate(){
				console.log(this.cateList.find(item=>item.category.parentId === this.navId));
				return this.cateList.find(item=>item.category.parentId === this.navId)
			}
			
		},
		methods:{
			...mapActions('indexModule',['getIndexCateListAticon']),
			
		},
		async mounted(){
			uni.showLoading({
			    title: '加载中'
			});
			await this.getIndexCateListAticon()
			uni.hideLoading()
		}
	};
</script>

<style lang="stylus">
.cateListContainer
	swiper
		width 100%
		height 370rpx
		image
			width 100%
			height 100%
	.title
		display block
		text-align center
		font-size 34rpx
		color #333
		line-height 70rpx
	.desc
		display block
		text-align center
		font-size 24rpx
		color #999
		line-height 40rpx
</style>
